<template>
	<view class="booking-address-container">
		<view v-if="showAdsSataus == 1" class="booking-address-block" @click="selectAddress">
			<view class="booking-address-block__bd">
				<view class="info">
					<view class="left">
						<view class="icon iconfont">&#xe61d;</view>
						<view class="name">{{initAddressInfo.receiver}} </view>
						<view class="phone">{{initAddressInfo.phone}}</view>
					</view>
					<view class="right">更换地址<view class="iconfont">&#xe67f;</view></view>
				</view>
				<view class="ads">
					<text class="txt">{{initAddressInfo.province}}{{initAddressInfo.city}}{{initAddressInfo.area}}{{initAddressInfo.address}}</text>
				</view>
			</view>
		</view>
		<!-- 有地址 -->
		
		<view class="booking-address-block" v-else-if="showAdsSataus == 2">
			<view class="booking-address-block__hd">
				<text class="iconfont">&#xe61d;</text>
			</view>
			<view class="booking-address-block__bd">
				<view class="mark">抱歉，您暂未添加收货地址</view>
			</view>
			<view class="booking-address-block__fd" @click="selectAddress">
				<text class="txt">立即添加</text>
				<text class="iconfont">&#xe67f;</text>
			</view>
		</view>
		<!-- 无地址 -->
	</view>
</template>

<script>
	/**
	 * 收货地址
	 * @property {Object} addressInfo 已选或者默认的地址信息
	 * 
	 */
	export default {
		name: 'stAddressSelect',
		props:{
			addressInfo: {
				type: Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				showAdsSataus: 0, // 1为有地址, 2为无地址
				initAddressInfo: {}, // 初始地址数据
			
			};
		},
		watch:{
			addressInfo(newAds,oldAds){
				if(newAds){
					if(newAds.id){
						this.showAdsSataus =1;
					}
					this.initAddressInfo = newAds;
					this.$emit('getAddressInfo', newAds)
				}
			}
		},
		mounted() {
			this.getAddressList()
		},
		methods: {
			// 跳转地址选择页面
			selectAddress(){
				uni.navigateTo({
					url:'../../subPackages/address/select'
				})
			},
			// 获取地址
			async getAddressList(){
				let params={
					method: 'api/v2/member/address/list'
				}
				let res = await this.$http(params)
				if(res.status){
					
					const dataList = res.data.list
					if(dataList && dataList.length){
						this.showAdsSataus = 1
						//检测是否有默认地址
						const defaultAddress = dataList.filter((value,key)=>{
							return value.is_default == 1
						})
						//默认地址
						if(defaultAddress.length){
							this.initAddressInfo = defaultAddress[0]
						}else{
							//如果没有默认地址,取第一个地址
							this.initAddressInfo = dataList[0]
						}
					}else{
						this.showAdsSataus = 2
					}
					this.$emit('getAddressInfo', this.initAddressInfo)
				}
			},
		
		}
	}
</script>

<style lang="scss">
	
	.booking-address-block{
		display: flex;
		align-items: center;
		padding: 22rpx 24rpx;
		// margin: 0 24rpx 20rpx;
		border-radius: 20rpx;
		background-color: $uni-bg-color;
		&__hd{
			flex: 0 0 auto;
			width: 44rpx;
			margin-right: 22rpx;
			.iconfont{
				font-size: 40rpx;
				background: linear-gradient(90deg, #FF3617 0%, #FF662A 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				text-fill-color: transparent;
			}
		}
		&__bd{
			flex: 1 1 auto;
			.mark{
				color: #333;
				height: 44rpx;
				line-height: 44rpx;
				font-size: $uni-font-size-sm;
			}
			.info{
				@extend .justifyspacec;
				.left{
					@extend .alignItems;
					.icon{
						font-size: 40rpx;
						background: linear-gradient(90deg, #FF3617 0%, #FF662A 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;
					}
					.name{
						font-size: $uni-font-size-base;
						font-weight: bold;
						margin-left: 10rpx;
					}
					.phone{
						color: $uni-text-color-grey;
						margin-left: 14rpx;
						font-size: $uni-font-size-sm;
					}
				}
				.right{
					@extend .justifyspacec;
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm;
					.iconfont{
						margin-top: 4rpx;
					}
				}
			}
			.ads{
				display: flex;
				justify-content: space-between;
				margin: 12rpx 0 0 50rpx;
				.txt{
					font-size: $uni-font-size-sm;
				}
			}
		}
		&__fd{
			flex: 0 0 auto;
			color: $uni-text-color-grey;
			.txt{
				height: 44rpx;
				line-height: 44rpx;
				font-size: $uni-font-size-sm;
			}
			.iconfont{
				vertical-align: middle;
				margin-top: 4rpx;
			}
		}
	}
</style>
